<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div class="layui-container" style="margin: 15px; padding: 15px; background-color: #fff;">
        <table class="layui-table layui-form">
            <thead>
                <tr>
                    <th><input type="checkbox" lay-skin="primary" lay-filter="filter-all" checked></th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th width="60">购买数量</th>
                    <th>金额</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <?php $money = 0; ?>
                {foreach $items as $item}
                <tr>
                    <td><input type="checkbox" lay-skin="primary" lay-filter="filter-sku"
                            sku_out_no="{$item['sku_out_no']}" checked></td>
                    <td><a href="/product/detail.html?out_no={$item['sku_out_no']}" title="{$item['sku_title']}">{$item['sku_title']}</a></td>
                    <td>{$item['price']}</td>
                    <td><input type="number" name="count" min="0" max="{$item['stock']}"
                            sku_out_no="{$item['sku_out_no']}" value="{$item['count']}" class="layui-input"
                            onchange="remoney({$item['sku_out_no']})"></td>
                    <td class="amount">{$item['money']}</td>
                    <td>{$item['add_time']|date='Y-m-d H:i:s'}</td>
                    <td><button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$item['id']})">删除</button>
                    </td>
                </tr>
                <?php $money += $item['money']; ?>
                {/foreach}
            </tbody>
        </table>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" onclick="dopay()">立即支付</button>
            </div>
            <div class="layui-input-inline">
                <div class="layui-form-mid layui-word-aux"><span>总计：</span><span
                        id="total">{$money}</span><span>元</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        var $ = layui.jquery
        form = layui.form;

        // 全选全不选
        remoney();
        form.on('checkbox(filter-all)', function (obj) {
            $('input[lay-filter="filter-sku"]').prop('checked', obj.elem.checked);
            form.render('checkbox');
            remoney();
        });
        form.on('checkbox(filter-sku)', function (obj) {
            $('input[lay-filter="filter-all"]').prop('checked', [...$('input[lay-filter="filter-sku"]')].every(el => el.checked));
            form.render('checkbox');
            remoney();
        });

        // 删除购物车
        function del(id) {
            layer.confirm('确定删除吗？', { icon: 3 }, function () {
                $.post('/carts/del', { id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json');
            });
        }

        // 重新计算金额
        function remoney(out_no_this = 0) {
            var money_arr = [];
            $('tbody input[type="checkbox"]').each((i, el) => money_arr.push({
                out_no_this: out_no_this,
                sku_out_no: $(el).attr('sku_out_no'),
                count: $(el).parent().siblings().find('input[name="count"]').val()
            }));
            $.post('/carts/remoney', { money_arr }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 }, () => window.location.reload());
                var money = 0;
                res.data.forEach(ele => {
                    var othis = $('tbody input[name="count"][sku_out_no="' + ele.out_no + '"]');
                    othis.parent().siblings('td[class="amount"]').text(parseFloat(othis.val()) * parseFloat(ele.price));
                    if (othis.parent().siblings('td').children('input[type="checkbox"]').is(':checked')) {
                        money += parseFloat(othis.parent('td').siblings('td[class="amount"]').text());
                    }
                });
                $('#total').text(money);
            }, 'json');
        }

        // 立即支付
        function dopay() {
            var chkList = $('tbody input[type="checkbox"]:checked'),
                sku_arr = [];

            if (!chkList.length) return layer.alert('请选择商品', { icon: 2 });
            chkList.each((i, item) => sku_arr.push({
                sku_out_no: $(item).attr('sku_out_no'),
                count: $(item).parent().siblings().find('input[name="count"]').val(),
            }));
            $.post('/buy/dobuy', { sku_arr }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.open({
                    title: '微信支付',
                    type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                    area: ['300px', '300px'],
                    shadeClose: true,
                    content: '/buy/showQrcode?url2=' + res.url2 + '&ord_no=' + res.ord_no,
                });
            }, 'json');
        }
    </script>
</body>

</html>